@extends('layouts.header')
@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 到期预警 <span class="c-gray en">&gt;</span> 预警查看
        <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
           title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <div class="page-container">
        <div class="">
            <div class="row">
                @if(!config('constant.is_lan'))
                <a href="javascript:;" onclick="layer_show('短信设置','/{{config('constant.name_admin')}}/notice/sms/set','','430')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe62e;</i> 短信通知设置 </a>
                @endif

                <a class="btn btn-primary radius" onclick="set_timeout()"><i class="Hui-iconfont">&#xe62e;</i>设置预警时间</a>
                <span class="ml-5">当前预警时间：{{$data['setting']['days']}}天</span>
                <span class="ml-5 c-red">到期15天后不再提醒</span>
            </div>
            <div class="row mt-20">
                <table class="table table-border table-bordered table-bg table-hover table-condensed table-responsive" id="datatable">
                    <thead>
                    <tr class="text-c">
                        <th>送检单位</th>
                        <th>联系人</th>
                        <th>联系电话</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script>
        var table, dwdata, count, lineindex;
        $(function () {
            inittable();
        })
        $.fn.dataTable.ext.errMode = 'throw';//datatable抛异常的方式，在console中输出，默认以alert的方式弹出
        var table = $('#datatable').DataTable({
            processing: true,//加载数据时候是否显示进度条
            language: {url: '/admin/lib/datatables/dataTables_Chinese_Lang.json'},
            columns: [
                {data: null, class: "text-c",},
                {
                    data: null, class: "text-c", render: function (data, type, row, meta) {
                        return dwdata[row][0].contact;
                    }
                },
                {
                    data: null, class: "text-c", render: function (data, type, row, meta) {
                        return dwdata[row][0].telephone;
                    }
                },
                {
                    data: null, class: "text-c length", render: function (data, type, row, meta) {
                        return dwdata[row].length;
                    }, target: 1
                },
                {
                    data: null, class: "text-c", render: function (data, type, row, meta) {
                        return '<span class="btn btn-primary radius size-MINI" onclick="more(`' + row + '`,this)">查看</span>';
                    }
                },
            ],
        });

        //点击查看
        function more(key, e) {
            lineindex = $($(e).context.parentNode).context.parentNode.rowIndex; //行号
            count = $(e).closest('tr').find('td.length').text(); //点击行的数量

            let data = dwdata[key];
            let content = '<table class="table table-border table-bordered table-bg table-hover table-condensed table-responsive">' +
                '<a class="btn btn-danger radius ml-10 mb-10 mt-10" onclick="piNotice()">批量不再提醒</a>' +
                '<thead>\n' +
                '                    <tr class="text-c">\n' +
                '                        <th><input type="checkbox" id="checkAll" onclick="checkAll(this)"></th>\n' +
                '                        <th>工器具名称</th>\n' +
                '                        <th>条形码</th>\n' +
                '                        <th>到期时间</th>\n' +
                '                        <th>操作</th>\n' +
                '                    </tr>\n' +
                '                    </thead><tbody>';
            $(data).each(function (i, item) {
                content += '<tr class="text-c">\n' +
                    '                        <td><input type="checkbox"></td>\n' +
                    '                        <td>' + item.tool_name + '</td>\n' +
                    '                        <td class="barcode">' + item.bar_code + '</td>\n' +
                    '                        <td>' + item.next_time + '</td>\n' +
                    '                        <td><span class="btn btn-primary radius size-MINI" onclick="notice(' + item.bar_code + ',this)">不再提醒</span></td>\n' +
                    '                    </tr>';
            })
            content += '</tbody></table>';
            layer.open({
                content: content,
                title: '预警样品列表',
                type: 1,
                area: ['800px', '600px'],
                scrolling: false,
                // skin: 'layui-layer-molv',
                closeBtn: 2, //右上角关闭按钮风格  0无,1默认,2
                shadeClose: true, //开启遮罩关闭
            });
        }

        function piNotice() {
            let checked = $('input:checkbox:checked'),
                num = ($('#checkAll').is(':checked') ? (checked.length - 1) : checked.length),
                barcodes = '';
            checked.each(function () {
                let bar_code = $(this).closest('tr').find('td.barcode').text();
                barcodes = barcodes + ',' + bar_code;
            });
            if (num === 0) {
                layer.msg('请先选择！');
                return;
            }
            //询问框
            layer.confirm('确定要取消这' + num + '个样品的到期提醒吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                ajax('get', '/{{config('constant.name_admin')}}/sampleinfo/notNotice/' + barcodes, '', piNoticeBack);
            })
        }

        function piNoticeBack(res) {
            for (i in res.data) {
                let barcode = res.data[i];
                $('td.barcode').each(function () {
                    $(this).text() == barcode ? $(this).closest('tr').remove() : '';
                })
            }
            count -= res.data.length;
            $('#datatable tbody > tr:eq(' + (lineindex - 1) + ') td.length').text(count);
        }

        function notice(barcode, e) {
            //询问框
            layer.confirm('确定要取消该样品的到期提醒吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '/{{config('constant.name_admin')}}/sampleinfo/notNotice/' + barcode,
                    dataType: 'json',
                    success: function (res) {
                        let msg, icon;
                        if (res) {
                            msg = '操作成功';
                            icon = 1;
                            $(e).closest('tr').remove();
                            count -= 1;
                            $('#datatable tbody > tr:eq(' + (lineindex - 1) + ') td.length').text(count);
                        } else {
                            msg = '操作失败';
                            icon = 5;
                        }
                        layer.msg(msg, {icon: icon});
                    },
                    error: function (obj) {
                        layer.msg(obj.status === 500 ? '连接错误' : '网络错误！');
                    }
                });
            })
        }

        function set_timeout() {
            var title = '预警时间设置';
            var url = '/{{config('constant.name_admin')}}/setting/warn_day_limit';
            var w = 800;
            var h = 500;
            layer_show(title, url, w, h);
        }

        function inittable() {
            $.ajax({
                url: "",
                dataType: 'json',
                data: $('#myform').serialize(),
                success: function (res) {
                    dwdata = res.dwdata;
                    table.clear().rows.add(res.data).draw(); //添加新数据
                },
                error: function () {
                    layer.msg('网络错误！');
                }
            },);
        }

        function checkAll(e) {
            $('input:checkbox').prop("checked", $(e).is(':checked'));
        }
    </script>
@endsection
